<template>
  <div class="colorpick">
	  <span>颜色主题</span>
	  <el-color-picker
	    v-model="themeColor"
	    :predefine="predefineColors"
	    @change="changeTheme"
	    size="small"
	  ></el-color-picker>
  </div>
  
</template>

<script>
export default {
  // inject: ['reload'], // 无痕刷新
  name: 'ThemePicker',
  data() {
    return {
      themeColor: '#409EFF', // 默认主题色
      predefineColors: [
        '#ffffff', // 白
        '#FF4500', // 橙红
        '#FF8C00', // 深橙
        '#FFD700', // 金色
        '#90EE90', // 浅绿
        '#00CED1', // 凫蓝
        '#409EFF', // Element 默认蓝
        '#C71585', // 中紫红
        '#2E8B57', // 海绿
        '#6A5ACD', // 石板蓝
      ]
    }
  },
  mounted() {
    // 从本地存储加载保存的主题
    const savedTheme = localStorage.getItem('themeColor')
    if (savedTheme) {
      this.themeColor = savedTheme
      this.changeTheme(savedTheme)
    }
  },
  methods: {
    changeTheme(color) {
      if (!color) return
      
      // 保存到本地存储
      localStorage.setItem('themeColor', color)
      
      // 动态修改Element UI主题色
      document.documentElement.style.setProperty('--primary-color', color)
      
      // 触发全局样式更新
      this.updateElementTheme(color)
      this.updateGlobalStyles(color)
      
      // 通知其他组件主题已更改
      this.$emit('theme-change', color)
    },
    
    updateElementTheme(color) {
      // 修改Element UI主题色
      document.documentElement.style.setProperty('--el-color-primary', color)
      
      // 生成并应用新的Element UI主题样式
      const themeCluster = this.getThemeCluster(color.replace('#', ''))
      const originalCluster = this.getThemeCluster('#409EFF'.replace('#', ''))
      
      let styles = ''
      originalCluster.forEach((color, index) => {
        styles += `--el-color-primary-light-${9-index}: ${themeCluster[index]};\n`
      })
      
      document.documentElement.style.cssText += styles
    },
    
    getThemeCluster(theme) {
      const tintColor = (color, tint) => {
        return tint === 0 ? color : this.mix('#ffffff', color, tint * 10)
      }
      
      const shadeColor = (color, shade) => {
        return shade === 0 ? color : this.mix('#000000', color, shade * 10)
      }
      
      const clusters = [theme]
      for (let i = 0; i <= 9; i++) {
        clusters.push(tintColor(theme, (i + 1) / 10))
      }
      clusters.push(shadeColor(theme, 0.1))
      return clusters
    },
    
    mix(color1, color2, weight) {
      const r1 = parseInt(color1.substring(1, 3), 16)
      const g1 = parseInt(color1.substring(3, 5), 16)
      const b1 = parseInt(color1.substring(5, 7), 16)
      
      const r2 = parseInt(color2.substring(1, 3), 16)
      const g2 = parseInt(color2.substring(3, 5), 16)
      const b2 = parseInt(color2.substring(5, 7), 16)
      
      const r = Math.round(r1 * (1 - weight) + r2 * weight)
      const g = Math.round(g1 * (1 - weight) + g2 * weight)
      const b = Math.round(b1 * (1 - weight) + b2 * weight)
      
      const hex = (x) => {
        const hexDigits = '0123456789ABCDEF'
        return hexDigits.charAt((x - x % 16) / 16) + hexDigits.charAt(x % 16)
      }
      
      return `#${hex(r)}${hex(g)}${hex(b)}`
    },
    
    updateGlobalStyles(color) {
      // 更新全局CSS变量
      const root = document.documentElement
      root.style.setProperty('--bg-color', '#ffffff')
      root.style.setProperty('--text-color', '#304156')
      root.style.setProperty('--primary-color', color)
      
      // 可以根据需要添加更多样式变量
    }
  }
}
</script>
<style lang="less" scoped>
	.colorpick{
		display: flex;
		align-items: center;
		span{
			font-size: 12px;
			margin-right: 8px;
		}
	}
</style>